<template>
  <div class="fuck">
    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>Stylus - 富有表现力的、动态的、健壮的CSS</span>
          </strong>
          <div class="demo">
            无
          </div>
          <div class="interpretation">
            <div>
              <p>
                项目内  样式允许使用Stylus
              </p>
              <a href="http://www.zhangxinxu.com/jq/stylus/">参考 http://www.zhangxinxu.com/jq/stylus/</a>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          <div id="highlighter_527076" class="syntaxhighlighter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">style</code>&nbsp;<code class="xml color1">lang</code><code class="xml plain">=</code><code class="xml string">"stylus"</code><code class="xml plain">&gt;</code></div><div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">a</code></div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">color&nbsp;red</code></div><div class="line number4 index3 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">style</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div>
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>图标使用</span>
          </strong>
          <div class="demo">
            <!-- 小图标使用方式 -->
            <!-- <svg class="icon" aria-hidden="true">
              <use xlink:href="#hd-jifen"></use>
            </svg> -->
            <hd-svg-icon name="hd-jifen" color="#8794F5" size="1.7rem" class="hdicon"></hd-svg-icon>
          </div>
          <div class="interpretation">
            <div>
              <p>1. 参数 name 对应的图标 id</p>
              <p>2. 参数 color 图标颜色 </p>
              <p>3. 参数 size 图标大小,单位统一使用 rem </p>
              <p>4. 参数 class 可以追加自定义样式,默认携带 icon 样式</p>
              <p>5. 参数 style 支持自定义内联样式</p>
              <p>ps : 图标使用 www.iconfont.com ,下载后的项目存放在 /static/iconfont/ 目录下,缺少的图标可以自行添加</p>
              <a href="../static/iconfont/demo_symbol.html">查看所有图标</a>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          <!-- <div id="highlighter_680525" class="syntaxhighlighter nogutter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">svg</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"icon"</code>&nbsp;<code class="xml color1">aria-hidden</code><code class="xml plain">=</code><code class="xml string">"true"</code><code class="xml plain">&gt;</code></div><div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">use</code>&nbsp;<code class="xml color1">xlink:href</code><code class="xml plain">=</code><code class="xml string">"#hd-icon-yuan"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">use</code><code class="xml plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="xml plain">&lt;/</code><code class="xml keyword">svg</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div> -->
          <div id="highlighter_276146" class="syntaxhighlighter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">hd-svg-icon</code>&nbsp;</div><div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"hd-jifen"</code>&nbsp;</div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">color</code><code class="xml plain">=</code><code class="xml string">"#8794F5"</code>&nbsp;</div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">size</code><code class="xml plain">=</code><code class="xml string">"1.7rem"</code>&nbsp;</div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"hdicon"</code><code class="xml plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">hd-svg-icon</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div>
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>图标实例</span>
          </strong>
          <div class="demo">
            <yd-cell-group>
              <yd-cell-item arrow>
                  <span slot="left">
                    <hd-svg-icon name="hd-jifen" color="#8794F5" size=".3rem" class="hdicon"></hd-svg-icon>
                    <span>我的订单</span>
                  </span>
                  <span slot="right">查看全部订单</span>
              </yd-cell-item>
            </yd-cell-group>
          </div>
          <div class="interpretation">
            <div>
              <p>看代码</p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          <div id="highlighter_998944" class="syntaxhighlighter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">yd-cell-group</code><code class="xml plain">&gt;</code></div><div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">yd-cell-item</code>&nbsp;<code class="xml plain">arrow&gt;</code></div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">span</code>&nbsp;<code class="xml color1">slot</code><code class="xml plain">=</code><code class="xml string">"left"</code><code class="xml plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">hd-svg-icon</code>&nbsp;<code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"hd-jifen"</code>&nbsp;<code class="xml color1">color</code><code class="xml plain">=</code><code class="xml string">"#8794F5"</code>&nbsp;<code class="xml color1">size</code><code class="xml plain">=</code><code class="xml string">".3rem"</code>&nbsp;<code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"hdicon"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">hd-svg-icon</code><code class="xml plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">span</code><code class="xml plain">&gt;我的订单&lt;/</code><code class="xml keyword">span</code><code class="xml plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">span</code><code class="xml plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">span</code>&nbsp;<code class="xml color1">slot</code><code class="xml plain">=</code><code class="xml string">"right"</code><code class="xml plain">&gt;查看全部订单&lt;/</code><code class="xml keyword">span</code><code class="xml plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">yd-cell-item</code><code class="xml plain">&gt;</code></div><div class="line number9 index8 alt2"><code class="xml plain">&lt;/</code><code class="xml keyword">yd-cell-group</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div>
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>输入校验</span>
          </strong>
          <div class="demo">
            <yd-cell-item>
              <span slot="left">身份证：</span>
              <yd-input slot="right" ref="idcard" hdLabel="身份证" hdVdate="idcard" type="tel" v-model="idcard" required :showSuccessIcon="true" :showErrorIcon="true" placeholder="请输入身份证" max="23"></yd-input>
            </yd-cell-item>
            <yd-button-group>
                <yd-button size="large" @click.native="clickHander">校验</yd-button>
            </yd-button-group>
            <div v-html="result" class="result"></div>
          </div>
          <div class="interpretation">
            <div>
              <p>参数 hdVdate="idcard" : 身份证格式校验</p>
              <p>参数 hdLabel="身份证" : 错误 mes 提示信息</p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          <div id="highlighter_457956" class="syntaxhighlighter nogutter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">yd-input</code>&nbsp;</div><div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">slot</code><code class="xml plain">=</code><code class="xml string">"right"</code>&nbsp;</div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">ref</code><code class="xml plain">=</code><code class="xml string">"idcard"</code>&nbsp;</div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">hdLabel</code><code class="xml plain">=</code><code class="xml string">"身份证"</code>&nbsp;</div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">hdVdate</code><code class="xml plain">=</code><code class="xml string">"idcard"</code>&nbsp;</div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"tel"</code>&nbsp;</div><div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">v-model</code><code class="xml plain">=</code><code class="xml string">"idcard"</code>&nbsp;</div><div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">required&nbsp;</code></div><div class="line number9 index8 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">:showSuccessIcon</code><code class="xml plain">=</code><code class="xml string">"true"</code>&nbsp;</div><div class="line number10 index9 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">:showErrorIcon</code><code class="xml plain">=</code><code class="xml string">"true"</code>&nbsp;</div><div class="line number11 index10 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">placeholder</code><code class="xml plain">=</code><code class="xml string">"请输入身份证"</code>&nbsp;</div><div class="line number12 index11 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">max</code><code class="xml plain">=</code><code class="xml string">"23"</code><code class="xml plain">&gt;</code></div><div class="line number13 index12 alt2"><code class="xml plain">&lt;/</code><code class="xml keyword">yd-input</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div>
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>通用头</span>
          </strong>
          <div class="demo">
            <!-- <hd-header title="方式1" color="#000000"/> -->
            <hd-header title="方式2" sticky color="#000000" bgcolor="#ffffff"/>
          </div>
          <div class="interpretation">
            <div>
              <p>通用头分两种展现形式</p>
              <p>方式一: fixed 形式 (默认),不占据一行,并且固定在头部</p>
              <p>方式二: sticky 形式 ,粘性布局,占据一行,并且固定在头部</p>
              <p>参数 sticky 默认 false </p>
              <p>参数 color 字体颜色 默认 '#ffffff' </p>
              <p>参数 bgcolor 导航背景颜色 默认 'inherit' (无色) </p>
              <p>PS 方式1 显示 在例子不能清晰展示,所以暂不显示 </p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          <div id="highlighter_274599" class="syntaxhighlighter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">hd-header</code>&nbsp;</div><div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">title</code><code class="xml plain">=</code><code class="xml string">"方式1"</code>&nbsp;</div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">color</code><code class="xml plain">=</code><code class="xml string">"#000000"</code></div><div class="line number4 index3 alt1"><code class="xml plain">/&gt;</code></div><div class="line number5 index4 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">hd-header</code>&nbsp;</div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">title</code><code class="xml plain">=</code><code class="xml string">"方式2"</code>&nbsp;</div><div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml plain">sticky&nbsp;</code></div><div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">color</code><code class="xml plain">=</code><code class="xml string">"#000000"</code>&nbsp;</div><div class="line number9 index8 alt2"><code class="xml spaces">&nbsp;&nbsp;</code><code class="xml color1">bgcolor</code><code class="xml plain">=</code><code class="xml string">"#ffffff"</code></div><div class="line number10 index9 alt1"><code class="xml plain">/&gt;</code></div></div></td></tr></tbody></table></div>
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>筛选上拉/下拉 demo </span>
          </strong>
          <div class="demo">
            <div>无</div>
          </div>
          <div class="interpretation">
            <div>
              <p>筛选下拉 demo : http://localhost:8080/#/demo/querytab</p>
              <router-link to="/demo/querytab">点击我查看示例(筛选下拉)</router-link>
              <p>筛选上拉 demo : http://localhost:8080/#/demo/querytabbottom</p>
              <router-link to="/demo/querytabbottom">点击我查看示例(筛选上拉)</router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>统一校验方法</span>
          </strong>
          <div class="demo">
            <div>无</div>
          </div>
          <div class="interpretation">
            <div>
              <p>参数 group : 传入要校验的表单的分组信息,默认为空,为全部校验</p>
              <p>说明</p>
              <p>1. 统一表单校验校验页面所有带有 ref 的属性, 项目中一般只在文本框之类的表单组件上使用 ref.</p>
              <p>2. 关键字为#号,标识分组信息. ex. ref="login#mobile"</p>
              <p>3. 一般使用方法 if (!this.checkForm('login')) return false , ps: login 参数为分组信息,不传递为全部校验</p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          <div id="highlighter_965724" class="syntaxhighlighter  js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">if</code>&nbsp;<code class="js plain">(!</code><code class="js keyword">this</code><code class="js plain">.checkForm(</code><code class="js string">'login'</code><code class="js plain">))&nbsp;</code><code class="js keyword">return</code>&nbsp;<code class="js keyword">false</code></div></div></td></tr></tbody></table></div>
        </div>
      </div>
    </div>
    
    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>二维码使用方法</span>
          </strong>
          <div class="demo">
            <div>无</div>
          </div>
          <div class="interpretation">
            <div>
              <p>1.引入 import QRCode from 'qrcode'</p>
              <p>2.添加canvas元素 <div id="highlighter_820528" class="syntaxhighlighter  xml"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">canvas</code>&nbsp;<code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"qrcode"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">canvas</code><code class="xml plain">&gt;</code></div></div></td></tr></tbody></table></div> </p>
              <p>3.在 mounted 方法中使用 </p>
              <div id="highlighter_977075" class="syntaxhighlighter  js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code>&nbsp;<code class="js plain">canvas&nbsp;=&nbsp;document.getElementById(</code><code class="js string">'qrcode'</code><code class="js plain">)</code></div><div class="line number2 index1 alt1"><code class="js plain">QRCode.toCanvas(canvas,&nbsp;</code><code class="js string">'<a href="http://www.baidu.com">http://www.baidu.com</a>'</code><code class="js plain">,&nbsp;</code><code class="js keyword">function</code>&nbsp;<code class="js plain">(error)&nbsp;{</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">if</code>&nbsp;<code class="js plain">(error)&nbsp;console.error(error)</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'success!'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">})</code></div></div></td></tr></tbody></table></div>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>轮播图示例</span>
          </strong>
          <div class="demo">
            <!-- swiper -->
            <swiper :options="swiperOption">
              <swiper-slide style="backgroundColor: #eee;">
                <img src="http://img1.3lian.com/2015/a1/43/d/152.jpg" alt="" srcset="" class="hd-img-responsive">
              </swiper-slide>
              <swiper-slide style="backgroundColor: #eee;">
                <img src="http://img1.3lian.com/2015/a1/43/d/153.jpg" alt="" srcset="" class="hd-img-responsive">
              </swiper-slide>
              <swiper-slide style="backgroundColor: #eee;">
                <img src="http://img1.3lian.com/2015/a1/43/d/156.jpg" alt="" srcset="" class="hd-img-responsive">
              </swiper-slide>
              <swiper-slide style="backgroundColor: #eee;">
                <img src="http://img1.3lian.com/2015/a1/43/d/158.jpg" alt="" srcset="" class="hd-img-responsive">
              </swiper-slide>
              <swiper-slide style="backgroundColor: #eee;">
                <img src="http://www.guaihaha.com/upload/article/201709/08/10381759b202998d2ebJckMwb.jpg" alt="" srcset="" class="hd-img-responsive">
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <div class="interpretation">
            <div>
              <p> 参数 详见 <a href="http://www.swiper.com.cn/api/index.html">http://www.swiper.com.cn/api/index.html</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          无
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>地图+轮播图 示例</span>
          </strong>
          <div class="demo">
            -
          </div>
          <div class="interpretation">
            <div>
              <p> 参数 详见 <router-link to="/demo/mapdemo">地图+轮播图</router-link></p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          无
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>跟随吸附导航</span>
          </strong>
          <div class="demo">
            -
          </div>
          <div class="interpretation">
            <div>
              <p> 参数 详见 <router-link to="/demo/ScrollBar">跟随吸附导航</router-link></p>
              <p>1. hd-scroll-bar hd-scroll-panel 绑定 v-model, v-model格式看下面代码 (这个是写在 data 中的)</p>
              <p>2. 设置 hd-scroll-bar-item hd-scroll-panel-item 组件的 link 属性, link相同为一组</p>
              <p>3. 设置 启动方法,在 hd-scroll-panel 组件上设置  @change="onChange" 方法内容看下面代码</p>
              <p>A. 具体不明确的,可以看ScrollBar.vue 示例代码</p>
              <p>B. ScrollBar.vue 有两段实现方式, 代码注释内 表明示例1的是 实现方式1 的内同, 示例2 是实现方式2 的内容,二者有冲突, 根据实际情况使用</p>
              <p>C. 默认显示示例1 效果,即组件形式</p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          <div id="highlighter_454650" class="syntaxhighlighter nogutter  js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">isSelected:&nbsp;{</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">link:&nbsp;</code><code class="js string">'0'</code>&nbsp;<code class="js comments">//&nbsp;导航与面板的绑定纽带</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div>
          <div id="highlighter_116446" class="syntaxhighlighter nogutter  js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">onChange(val)&nbsp;{</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.isSelected&nbsp;=&nbsp;val</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div>
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>微信 jssdk 使用方法</span>
          </strong>
          <div class="demo">
            -
          </div>
          <div class="interpretation">
            <div>
              <p>1. 微信 jssdk 需要初始化后才能使用 this.HDWX().wxInit() 表示初始化</p>
              <p>2. 获取图片套路 -> 初始化微信 jssdk -> 调用 wx.chooseImage 选图片组件 -> 调用 wx.getLocalImgData 预览图片 -> 保存 -> 上传微信素材服务器 wx.uploadImage -> 成功后将图片转成 oss 地址 -> 完成</p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          <div id="highlighter_745116" class="syntaxhighlighter nogutter  js"><div class="toolbar"><span><a href="#" class="toolbar_item command_help help">?</a></span></div><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">//&nbsp;微信组件初始化后才能使用,首先初始化</code></div><div class="line number2 index1 alt1"><code class="js keyword">this</code><code class="js plain">.HDWX().wxInit((wx)&nbsp;=&gt;&nbsp;{</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js comments">//&nbsp;调用相关微信组件&nbsp;微信参考文档&nbsp;<a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421141115">https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421141115</a></code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js comments">//&nbsp;例如:&nbsp;调用&nbsp;选择图片</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">wx.chooseImage({</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">count:&nbsp;1,&nbsp;</code><code class="js comments">//&nbsp;默认9</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">sizeType:&nbsp;[</code><code class="js string">'original'</code><code class="js plain">,&nbsp;</code><code class="js string">'compressed'</code><code class="js plain">],&nbsp;</code><code class="js comments">//&nbsp;可以指定是原图还是压缩图，默认二者都有</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">sourceType:&nbsp;[</code><code class="js string">'album'</code><code class="js plain">,&nbsp;</code><code class="js string">'camera'</code><code class="js plain">],&nbsp;</code><code class="js comments">//&nbsp;可以指定来源是相册还是相机，默认二者都有</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">success:&nbsp;(res)&nbsp;=&gt;&nbsp;{</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;var&nbsp;localIds&nbsp;=&nbsp;res.localIds;&nbsp;//&nbsp;返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">var</code>&nbsp;<code class="js plain">localIds&nbsp;=&nbsp;res.localIds;&nbsp;</code><code class="js comments">//&nbsp;返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;获取图片,本地预览</code></div><div class="line number13 index12 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">wx.getLocalImgData({</code></div><div class="line number14 index13 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">localId:&nbsp;localIds[0],&nbsp;</code><code class="js comments">//&nbsp;图片的localID</code></div><div class="line number15 index14 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">success:&nbsp;(res)&nbsp;=&gt;&nbsp;{</code></div><div class="line number16 index15 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">var</code>&nbsp;<code class="js plain">localData&nbsp;=&nbsp;res.localData;&nbsp;</code><code class="js comments">//&nbsp;localData是图片的base64数据，可以用img标签显示</code></div><div class="line number17 index16 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.addItem(</code><code class="js string">'image'</code><code class="js plain">,&nbsp;localData)</code></div><div class="line number18 index17 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number19 index18 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">});</code></div><div class="line number20 index19 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;图片上传到微信素材服务器,然后将图片转成&nbsp;oss&nbsp;地址&nbsp;</code></div><div class="line number21 index20 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;wx.uploadImage({</code></div><div class="line number22 index21 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;localId:&nbsp;localIds[0],&nbsp;//&nbsp;需要上传的图片的本地ID，由chooseImage接口获得</code></div><div class="line number23 index22 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;isShowProgressTips:&nbsp;1,&nbsp;//&nbsp;默认为1，显示进度提示</code></div><div class="line number24 index23 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;success:&nbsp;function&nbsp;(res)&nbsp;{</code></div><div class="line number25 index24 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;serverId&nbsp;=&nbsp;res.serverId;&nbsp;//&nbsp;返回图片的服务器端ID</code></div><div class="line number26 index25 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//微信图片转成oss图片格式</code></div><div class="line number27 index26 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.hdAjax({</code></div><div class="line number28 index27 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;"post",</code></div><div class="line number29 index28 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{</code></div><div class="line number30 index29 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;media_id:&nbsp;serverId</code></div><div class="line number31 index30 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},</code></div><div class="line number32 index31 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;API().wx.getMediaToOss,</code></div><div class="line number33 index32 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function&nbsp;(data)&nbsp;{</code></div><div class="line number34 index33 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.addItem('image',&nbsp;data.result)</code></div><div class="line number35 index34 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</code></div><div class="line number36 index35 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</code></div><div class="line number37 index36 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;&nbsp;&nbsp;}</code></div><div class="line number38 index37 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//&nbsp;});</code></div><div class="line number39 index38 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">},</code></div><div class="line number40 index39 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">fail:&nbsp;(res)&nbsp;=&gt;&nbsp;{</code></div><div class="line number41 index40 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'=============图片上传失败======================='</code><code class="js plain">);</code></div><div class="line number42 index41 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">console.log(res);</code></div><div class="line number43 index42 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'===================================='</code><code class="js plain">);</code></div><div class="line number44 index43 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number45 index44 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">})</code></div><div class="line number46 index45 alt1"><code class="js plain">})</code></div></div></td></tr></tbody></table></div>
        </div>
      </div>
    </div>

    <div class="demo-box">
      <div class="demo-content">
        <div class="content">
          <strong>
            <span>上传组件</span>
          </strong>
          <div class="demo">
            -
          </div>
          <div class="interpretation">
            <div>
              <p>1. 组件只实现了自定义上传组件样式,返回上传文件.文件的服务器上传,添加,限制个数,等操作由各个业务定制自行完成</p>
              <p>示例参数说明:</p>
              <p>1. 属性 @filesChange="" 选择完文件后的回调, 返回值:文件数组</p>
              <p>2. 属性 :multiple Boolean 是否开启多选模式</p>
              <p>PS: 具体使用方法可以看示例 <router-link to="/demo/H5Upload">上传组件示例</router-link></p>
            </div>
          </div>
        </div>
      </div>
      <div class="demo-content">
        <div class="demo-code">
          -
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'demo',
    data () {
      return {
        username: '',
        mobile: '',
        idcard: '',
        result: '',
        // swiper 参数设置 详见
        swiperOption: {
          pagination: '.swiper-pagination',
          slidesPerView: 'auto',
          centeredSlides: true,
          paginationClickable: true,
          spaceBetween: 30,
          loop: true
        }
      }
    },
    methods: {
      clickHander () {
        // 获取身份证校验信息
        const idcard = this.$refs.idcard
        this.result = `{<br />  valid：${idcard.valid}，<br />  errorMes：'${idcard.errorMsg}'，<br />  errorCode：'${idcard.errorCode}'<br />}`;
      }
    }
  }
</script>

<style lang="stylus" scoped>
@import './shCoreMidnight.css'
  .fuck {
    padding-left: 1.3em;
    padding-right: 1.3em;
  }
  .demo-box {
    border: 1px solid #e2e2e2;
    border-radius: 1px;
    display: flex;
    margin-top: 25px;
    background-color: #fefefe;
    flex-direction: column;
  }
  .demo-content {
    font-size: 13px;
    -webkit-transition: height .2s ease-in-out;
    transition: height .2s ease-in-out;
    position: relative;
  }
  .demo-content .content .demo {
    background-color: #fff;
    padding: 18px 20px 15px;
  }
  .demo-content .content .interpretation {
    border-top: 1px solid #eee;
    padding: 15px 20px;
    font-size: 12px;
    line-height: 22px;
  }
  .demo-content:last-child {
    overflow: hidden;
    border-top: 1px dashed #dedede;
    position: relative;
  }
  .demo-content .content>strong {
    font-weight: 400;
    padding: 0 10px;
    position: absolute;
    z-index: 2;
    left: 25px;
    color: #42ae7c;
    font-size: 14px;
    top: -7px;
  }
  .demo-content .content>strong span {
    position: relative;
    z-index: 3;
  }
  .demo-content .content>strong:after {
    content: "";
    height: 1px;
    width: 100%;
    background-color: #fefefe;
    position: absolute;
    top: 6px;
    left: 0;
    z-index: 1;
  }
  .demo-code{
    padding-left: 1.3em;
    padding-right: 1.3em;
  }
  a
    color red
  .result
    color red
  // 滑动样式
  .swiper-container {
    width: 100%;
    height: 100%;
    margin: 20px auto;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 60%;

    /* Center slide text vertically */
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
</style>

